<template>
    <div>
      <div class="topDownloads">
        <div class="cardTop">
          <div class="cardTitle">
            Top Downloads
          </div>
          <div class="rightType">
            <a class="item">Games</a>
            <a class="item">Apps</a>
          </div>
        </div>
        <div class="indexContent">
          <a-row :gutter="[16, 16]">
            <a-col v-for="(item, index) in topDownLoadList" :xl="8" :lg="12" :md="24" :xs="24">
              <AppItem class="appItem" :item="item" :index="index + 1" />
            </a-col>
          </a-row>
        </div>
      </div>
      <AppItemList :list="aiToolsApp" :name="'AI Tools App'" />
      <HotList :list="hotGames" :name="'HOT Games'" />
      <HotList :list="topDownLoadList" :name="'HOT Apps'" />
      <div class="about">
        <div class="aboutTitle">
          About APKDock
        </div>
        <div class="aboutContent">
          APKDock is a third-party app store primarily for Android devices. It serves as a platform where users can
          download APK (Android Package Kit) files for a wide variety of apps and games
        </div>
        <div class="aboutContent">
          • Vast Library: APKDock hosts a large collection of Android apps, including those that might not be available on
          the Google Play Store due to regional restrictions, developer preference, or other reasons
        </div>
        <div class="aboutContent">
          • No Regional Restrictions: Users can often download apps that are geographically restricted on the official app
          store.
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  const topDownLoadList = ref([])
  const aiToolsApp = ref([])
  const hotGames = ref([])
  const hotApps = ref([])
  const route = useRoute()
  
  const loadIndex = async () => {
    try {
      const { data, error } = await useApi('/api/app/getAppCategoryList', {
        method: 'GET',
        params: {
          // language: route.params.path === '/' ? 'en' : route.params.path.substring(1),
          language: route.params.hasOwnProperty('language') ?  route.params.language : 'en',
          category_id: '1,2,3,4,5'
        }
      })
      console.log(route.params.hasOwnProperty('language') ?  route.params.language : 'en');
      console.log(data.value);
      if (error.value) {
        console.error('加载数据失败:', error.value)
        return
      }      
      topDownLoadList.value = data.value.top_downloads_app.slice(0, 9);
      aiToolsApp.value = data.value.al_tools_app.slice(0, 9);
      hotGames.value = data.value.hot_games.slice(0, 8);
      console.log(hotApps.value);
      
    } catch (err) {
      console.error('请求出错:', err)
    }
  }
  loadIndex()
  const structuredData = {
    "@context": useRuntimeConfig().public.baseURL,
    "@type": "WebSite",
    name: "APKDock",
    url: useRuntimeConfig().public.baseURL,
    description: "Download the latest and older versions of Android apps and games securely and for free on APKDock. Explore a wide variety of APKs, all virus-checked.",
  }
  useHead({
    title: "Android App Downloads: Discover Free APKs on APKDock - APKDock",
    meta: [
      {
        name: 'description',
        content: computed(() => `Download the latest and older versions of Android apps and games securely and for free on APKDock. Explore a wide variety of APKs, all virus-checked. - APKDock`)
      },
      {
              name: 'robots',
              content: 'noindex,nofollow'
      },
    ],
    script: [
      {
        type: 'application/ld+json',
        innerHTML: JSON.stringify(structuredData),
        dangerouslyDisableSanitizers: ['innerHTML']
      }
    ]
  })
  </script>
  <style scoped lang="less">
  .topDownloads {
    border-radius: 12px;
    border: 1px solid var(--Gray-100, #F3F4F6);
    background: #FFF;
    /* Card Shadow */
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    margin: 24px 0;
  
    .cardTop {
      display: flex;
      justify-content: space-between;
      width: 100%;
  
      .rightType {
        margin-left: auto;
        display: flex;
        gap: 1rem;
      }
  
      .item {
        box-sizing: content-box;
        display: flex;
        padding: 6px 16px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        border-radius: 100px;
        border: 1px solid var(--Indigo-200, #E0D9FC);
        background: var(--Indigo-50, #F8F6FE);
  
        &:hover {
          text-decoration: none;
          /* hover 时也不显示下划线 */
          color: inherit;
          /* 保持原有颜色 */
        }
      }
  
      .cardTitle {
        color: var(--Text-Title, #3E4351);
        font-family: Roboto;
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: 40px;
      }
    }
  
    .indexContent {
      display: flex;
      flex-wrap: wrap;
  
    }
  }
  
  .cardTitle {
    color: var(--Text-Title, #3E4351);
    font-family: Roboto;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
  }
  
  .hotGame {
    margin-bottom: 24px;
  
    @media screen and (max-width: 1700px) {
      overflow-x: auto;
      /* 添加水平滚动条 */
      overflow-y: hidden;
      /* 隐藏垂直滚动条 */
  
      /* 添加以下样式来美化滚动条 */
      &::-webkit-scrollbar {
        height: 6px;
        /* 滚动条高度 */
      }
  
      &::-webkit-scrollbar-track {
        background: #f1f1f1;
        /* 滚动条轨道颜色 */
        border-radius: 3px;
      }
  
      &::-webkit-scrollbar-thumb {
        background: #888;
        /* 滚动条滑块颜色 */
        border-radius: 3px;
      }
  
      &::-webkit-scrollbar-thumb:hover {
        background: #555;
        /* 滚动条滑块悬停颜色 */
      }
    }
  
    /* 移除固定最小宽度，改用内容宽度 */
    .ant-row {
      width: max-content !important;
      min-width: 1415px !important;
      flex-wrap: nowrap !important;
    }
  
    .ant-col {
      flex-shrink: 0 !important;
      /* 防止列被压缩 */
      width: auto !important;
      /* 使用自动宽度 */
    }
  }
  
  .flex {
    display: flex;
  }
  
  .about {
    width: 100%;
    margin-bottom: 32px;
    border-radius: 12px;
    border: 1px solid var(--Gray-100, #F3F4F6);
    background: #FFF;
    /* Card Shadow */
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
    display: flex;
    padding: 16px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
  
    .aboutTitle {
      color: var(--Text-Title, #3E4351);
      font-family: Roboto;
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 28px;
      /* 175% */
    }
  
    .aboutContent {
      width: 100%;
      color: var(--Text-Text, #505662);
      font-family: Roboto;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 24px;
      /* 171.429% */
    }
  }
  
  //@media screen and (max-width: 1164px)  {
  //  .appItem{
  //    margin-bottom: 16px;
  //    width:45%
  //  }
  //}
  //@media screen and (max-width: 1164px)  {
  //  .appItem{
  //    margin-bottom: 16px;
  //    width:100%
  //  }
  //}</style>